<!DOCTYPE html>
<html lang="ch" xmlns:th="https://www.thymeleaf.org">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>V视界后台管理</title>
    <link rel="stylesheet" href="../iconfont/iconfont.css" type="text/css" th:href="@{/static/iconfont/iconfont.css}">
    <link rel="stylesheet" href="../css/backstage.css" th:href="@{/static/css/backstage.css}">
    <link rel="stylesheet" href="../customAlertConfirm/customAlertConfirm.css" th:href="@{/static/customAlertConfirm/customAlertConfirm.css}">
    <link rel="stylesheet" th:href="@{/static/css/backstage-hotSea.css}">
</head>

<body>

<div class="outerBox">
    <div class="headerBox">
        <div class="logoBox">
            <img src="../img/logo.png" alt="logo" class="logo" th:src="@{/static/img/logo.png}">
        </div>
        <div class="titleBox">
            <h1>V视界后台管理</h1>
        </div>
        <div class="managerBox">
            <span>你好,<i th:text="${username}">username</i></span>
            <a th:href="@{/manager/managerLogout}" class="exit">退出</a>
        </div>
    </div>
    <div class="navBox">

        <ul class="navList userNav">
            <a th:href="@{/user/userList}">
                <li class="navLi">
                    <i class="iconfont icon-geren">用户管理</i>
                </li>
            </a>
            <li class="navLi active">
                <i class="iconfont icon-bowenshu">博文管理</i>
            </li>
            <a th:href="@{/blog/getAuditBlogList}">
                <li class="navLi">
                    <i class="iconfont icon-shenhe">博文审核</i>
                </li>
            </a>
            <a th:href="@{/manager/typeList}">
                <li class="navLi">
                    <i class="iconfont icon-leimupinleifenleileibie">类别管理</i>
                </li>
            </a>
            <a th:href="@{/manager/getReportForManager}" methods="post">
                <li class="navLi">
                    <i class="iconfont">&#xe6d6;举报处理</i>
                </li>
            </a>
        </ul>
    </div>
    <div class="opeBox">
        <ul class="opeList">
            <li class="opeLi show">
                <div class="blogManage">
                    <h2 class="opeTitle">热搜</h2>
                    <div class="topSeaBox">
                       <div class="tableBox">
                           <table class="hotSeaTable infoTable">
                               <thead>
                               <tr>
                                   <th>排名</th>
                                   <th>标签</th>
                                   <th>使用博文数</th>
                                   <th>操作</th>
                               </tr>
                               </thead>
                               <tbody>
                               <tr th:each="labels:${pageBean.rows}">
                                   <td th:text="${labels.rank}"></td>
                                   <td th:text="${labels.label}"></td>
                                   <td th:text="${labels.count}"></td>
                                   <td>
                                       <form class="delHotSeaForm">
                                           <input type="hidden" name="label" th:value="${labels.id}">
                                           <button type="button" class="delHotSeaBtn"><i class="iconfont icon-shanchu"></i></button>
                                       </form>
                                   </td>
                               </tr>
                               </tbody>
                           </table>
                       </div>
                    </div>
                    <div class="pageBox topSeaPage">
                        <div>
                            <button class="topSeaPrePage"><</button>
                            <button class="showHotSeaPage showPage" style="width: 35px;cursor: inherit;">0</button>
                            <button class="topSeaNextPage">></button>
                        </div>
                        <div class="showHotSeaTotalPage showTotalPage">共0页</div>
                        <div>
                            <form class="hotSeaPageForm pageForm" th:action="@{/manager/getHotSearchBlog}" method="get">
                                到第<input type="number" name="pageNo" class="hotSeaPageNo"  step="any">页
                                <button>跳转</button>
                            </form>
                            <form class="hiddenTopSeaPageForm" th:action="@{/manager/getHotSearchBlog}" style="display: none">
                                <input name="pageNo" class="hiddenTopSeaPageNo">
                            </form>
                        </div>
                        <script type="text/javascript" th:inline="javascript">
                            let labels=[[${pageBean.rows}]]
                            console.log(labels)
                            // 若直接将pagecount设置为1，则因为表单提交时的网页刷新导致pagecount重新变回1，所以要将其以会话储存的方式保存
                            var topSeaPageCount = sessionStorage.getItem('topSeaPageCount') || 1

                            let totalNumber = [[${pageBean.total}]]
                            let totalPage = Math.ceil(totalNumber / 10)
                            const hotSeaPageForm = document.querySelector('.hotSeaPageForm')
                            const topSeaPrePage = document.querySelector('.topSeaPrePage')
                            const topSeaNextPage = document.querySelector('.topSeaNextPage')
                            const showHotSeaTotalPage=document.querySelector('.showHotSeaTotalPage')
                            const hiddenTopSeaPageForm=document.querySelector('.hiddenTopSeaPageForm')
                            const showHotSeaPage=document.querySelector('.showHotSeaPage')
                            showHotSeaTotalPage.innerHTML=`共${totalPage}页`
                            showHotSeaPage.innerHTML=`${topSeaPageCount}`
                            //分别为上一页、下一页添加点击事件
                            topSeaPrePage.addEventListener('click', () => {
                                // 判断页码数大小，小于等于1则返回，并提示信息
                                if (topSeaPageCount <= 1) {
                                    showCustomAlert('当前已是第一页', false)
                                    return
                                }
                                // 若没问题则对userPageCount--，调用方法重新渲染用户信息
                                topSeaPageCount--
                                updatePageNumber()
                            })

                            topSeaNextPage.addEventListener('click', () => {
                                // 大于等于最大页码数时，返回，提示信息
                                if (topSeaPageCount >= totalPage) {
                                    showCustomAlert('当前已是最后一页', false)
                                    return
                                }
                                // 否侧进行++，调用方法
                                topSeaPageCount++
                                updatePageNumber()
                            })
                            function updatePageNumber() {
                                // 将userPageCount储存在会话储存中，防止页面刷新导致pagecount丢失
                                sessionStorage.setItem('topSeaPageCount', topSeaPageCount)
                                hiddenTopSeaPageForm.pageNo.value = topSeaPageCount
                                hiddenTopSeaPageForm.submit()
                            }
                            hotSeaPageForm.addEventListener('submit',(e)=>{
                                e.preventDefault()
                                if(hotSeaPageForm.pageNo.value<=0||hotSeaPageForm.pageNo.value>totalPage||!(hotSeaPageForm.pageNo.value%1 === 0)){
                                    showCustomAlert('输入的页码数有误，请重新输入',false)
                                    hotSeaPageForm.reset()
                                }else{
                                    topSeaPageCount=hotSeaPageForm.pageNo.value
                                    sessionStorage.setItem('topSeaPageCount', topSeaPageCount)
                                    hotSeaPageForm.submit()
                                }
                            })
                        </script>
                    </div>
                </div>
            </li>
        </ul>
    </div>
</div>
</body>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="../../static/customAlertConfirm/customAlertConfirm.js" th:src="@{/static/customAlertConfirm/customAlertConfirm.js}"></script>
<script  th:src="@{/static/js/backstage-hotSea.js}"></script>
</html>